<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../../common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="${ctx}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/datatables/css/matrix-style.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/dist/css/AdminLTE.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/datatables/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/validationEngine/css/validationEngine.jquery.css" rel="stylesheet"
          type="text/css">
    <link href="${ctx}/static/plugins/layer/skin/default/layer.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .btn-sm {
            border-width: 4px;
            font-size: 13px;
            padding: 4px 9px;
            line-height: 1.39;
        }

        .code_space {
            margin-left: -4px;
            margin-right: 14px;
        }

        .btn_key {
            background-color: #6fb3e0 !important;
            border-color: #6fb3e0;
        }

        .btn_key:hover {
            color: #fff;
            background-color: #39b3d7;
            border-color: #269abc;
        }

        .code_width {
            width: 36.5%;
        }

        @media only screen and (max-width: 767px ) {
            .code_width {
                width: 102%;
            }
        }

        .radios {
            margin-bottom: 20px;
            float: left;
            margin-left: 40px;
        }
        .left{
        	float:left; width:44%; height:100%; 
        }
        .right{
        	float:left; width:56%;height:100%; 
        }
        .form-control{
        	width:250px;
        }
		.image-control{
			width: 200px;
			height: 100px;
			border: solid thin seashell;
			background-color: gainsboro;
		}
    </style>
</head>
<body>	
<div id="divCenter" align="center"
     style="position: absolute; z-index: 9; display: none; background-color: #eee; width:400px; height:255px;left:10px;top:18px;right:10px;">
	    <br>
	    <br>
	    <br>
	    <div style="">银行充值中，请不要关闭！</div>
	    <br>
	    <br>
	    <br>
	    <br>
		<div style="">
			<a class="btn btn-success" href="javascript:void(0);" onclick="chargeSuccess();">充值成功</a>
			<span style="width:40px;">&nbsp;</span>
			<a class="btn btn-success" href="javascript:void(0);" onclick="problem();">遇到问题</a>
	    </div>
	</div>
<div class="content">

    <form class="form-horizontal" id="addForm">
	    <br>
	    <br>
		<br>
	    <br>
		<br>
		<br>
        <div class="all" style="float:inherit;margin-top: -30px">
			<div class="left">
				 	<div class="form-group" style="display:none;">
			            <label for="manageId" class="col-sm-4 control-label">用户Id:</label>
			            <div class="col-sm-3">
			             	<input type="text" class="form-control" id="manageId" name="manageId"
		                     value="${userBalanceVo.manageId}">
			            </div>
			        </div>
		        <div id="inputShow" class="form-group">
		            <label for="chargeMoney" class="col-sm-4 control-label"><span style="color:red;">*</span>充值金额:</label>
		            <div class="col-sm-3">
		                <input type="text" class="form-control validate[required,custom[number],min[0.01],custom[minNumber]]" id="chargeMoney" name="chargeMoney"
		                     data-fun="dataFunDemo" placeholder="请输入充值金额">
		            </div>
		        </div>
		        <div id="chargeDiv"  class="form-group" align="center">
		            <div class="col-sm-10">
		                <button type="button" id="chargeBtn" onclick="" class="btn btn-primary">去充值</button>
		            </div>
		       	</div>
	       </div>
       </div>
    </form>
    <!-- 隐藏的表单，用于支付接口 -->
	<div style="display:none;">    
    <form id="payForm" method="post" target="_blank" action="/api/pay/payeco">
       	<input name="orderNum" id="orderNum">
       	<input name="amount" id="amount">
    </form>
  	</div>
</div>

<script src="${ctx}/static/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="${ctx}/static/bootstrap/js/bootstrap.min.js"></script>
<!-- datatable -->
<script src="${ctx}/static/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
<script src="${ctx}/static/js/common/time/WdatePicker.js" type="text/javascript"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine-zh_CN.js"></script>
<script src="${ctx}/static/plugins/validationEngine/jquery.validationEngine.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script>

    $(function () {
    	$("#addForm").validationEngine({ 
    		promptPosition: "topRight", 
    		validationEventTriggers:"keyup blur", 
    		success :  false,
    		failure : function() { callFailFunction()  }
   		});
    	$("#successShow").hide();
    	$("#chargeBtn").click(function(){
	    	var flag = $("#addForm").validationEngine("validate");
	    	if(!flag){
	     		return false;
	    	}
    		//1.写充值记录表，返回订单号
        	$.ajax({
        		async       : false,
        		type 		: "POST",
        	    url		    : "${ctx}/api/merchant/chargeMerchantCreateOrder",
        		data 		: $("#addForm").serialize(),
        		success 	: function( d ) {
        			if(d.code=="200"){
        				var orderNum = d.data;
        				var amount = $("#chargeMoney").val();
        				confirm();
        				$("input[name='orderNum']").val(orderNum);
        				$("input[name='amount']").val(amount);

        				//第三方支付
        	    		$("#payForm").submit();
        			} else {
        				alert(d.message);
        			}
        		}
        	});
    	});
    });
    
    function confirm() {
        sendDiv = layer.open({
            title: "充值提示框",
            type: 1,
            closeBtn: 0,
            resize: false,
            area: ['425px', '345px'], //宽高
            content: $("#divCenter")
        });

    }
    function problem() {
        layer.close(sendDiv);
        window.location.href = "${ctx}/api/merchant/merchantBalancePage?manageId=${userBalanceVo.manageId}";
    }
    
    function chargeSuccess(){
        layer.close(sendDiv);
        window.location.href = "${ctx}/api/merchant/merchantBalancePage?manageId=${userBalanceVo.manageId}";
    }

</script>
</body>
</html>